<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入bue的的头文件-->
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>

<div id="app">
    {{title}}，
    {{sex}}，
    {{age}}，
    {{myHello()}},
    {{rich}}

    <p v-if="flag">
        这个p标签经过判断值为true
    </p>
    <p v-else-if="rich">
        这个p标签经过判断rich属性的值为true
    </p>
    <p v-else="rich">
        这个p标签经过判断rich属性的值为false
    </p>

    <!--判断并显示语法-->
    <p v-show="rich">
        使用show判断显示语法, rich的值为false
    </p>

    <!--第一种遍历数组语法-->
    <ul>
        <!--遍历属性名为args的集合 每次遍历一个元素 放入a中-->
        <li v-for="a in args">{{a}}</li>
    </ul>
    <!--遍历数组的第二种语法-->
    <ul>
        <!--遍历数组args的集合 每次遍历就拿出一个元素 放入azhong -->
        <li v-for="(a,i) in args" :key="i">{{i}}==={{a}}</li>

    </ul>
    <!--遍历数组的第三种语法-->
    <ul>
        <li v-for="(v,k,i) in stu">{{v}}==={{k}}=={{i}}</li>
    </ul>

    <!--添加事件绑定-->
    <button type="button" v-on:click="myadd(1)">
        累加
    </button>
    <!--显示累加的数据-->
    显示累加的数据：{{sum}}
    <br>
    <!--演示双向绑定-->
    <input type="text" v-model="title">
    显示绑定的数据 {{title}}
    <br>
    <!--绑定html原有标签的属性-->
    <a href="jd">跳转到京东</a>

    <br>
    <!--添加x轴y轴的事件绑定,获取x轴y轴的位置-->
    <p @mousemove="xy">
        x轴:{{x}}
        y轴:{{y}}
    </p>
</div>


<script>
    //创建一个vue对象
    new Vue({
        //绑定id为app的页面元素
        el: "#app",
        //定义数据
        data: {
            sum: 0,
            title: "张三",
            sex: "nan",
            age: 200,
            flag: true,
            rich: true,
            x: 0,
            y: 0,
            args: [1, 2, 1, 3, 4, 5, 6, 7, 8, 9],
            stu: {
                username: "李四",
                sex: "男",
                age: 18
            },
            jd: "http://www.jd.com"
        },

        //定义方法
        methods: {
            myHello: function () {
                return "Hello word"

            },
            myadd: function (s) {
                this.sum = this.sum + s

            },
            xy: function (event) {
                //获取x轴的坐标
                this.x = event.clientX;
                //获取y轴的坐标
                this.y = event.clientY;
            }
        }

    });

</script>

</body>
</html>